<template>
  <div class="detail-wrapper partner-detail-wrapper">
    <PageTitle title="返回伙伴列表" />

    <div
      class="detail-content"
      v-if="Object.keys(detail).length">
      <el-scrollbar>
        <div class="detail-box">
          <div class="detail-title-box">
            <span>基本信息</span>
          </div>

          <div class="detail-info base-info">
            <div class="info-box">
              <div class="item">
                <p>伙伴账号</p>
                <p>{{ detail.member.accountName }}</p>
              </div>
              <div class="item">
                <p>伙伴名称</p>
                <p>{{ detail.member.nickname }}</p>
              </div>
              <div class="item">
                <p>加入时间</p>
                <p>{{ detail.member.createTime }}</p>
              </div>
              <div class="item">
                <p>伙伴身份</p>
                <div>
                  <span>{{ detail.member.levelName }}</span>
                  <el-popover
                    placement="bottom"
                    :width="330"
                    trigger="click"
                    popper-class="popover-wrapper"
                    ref="popoverIdentity"
                    @hide="
                      formLevel.levelId = '';
                      formLevel.smsCode = '';
                    ">
                    <template #reference>
                      <el-text
                        type="primary"
                        class="text-btn">
                        调整
                      </el-text>
                    </template>
                    <div class="popover-content">
                      <div class="title">伙伴当前等级：{{ detail.member.levelName }}</div>

                      <el-form
                        label-position="top"
                        :model="formLevel">
                        <el-form-item label="将调整为">
                          <div class="content-item">
                            <div class="content-item-box">
                              <el-select
                                v-model="formLevel.levelId"
                                placeholder="请选择"
                                :teleported="false">
                                <el-option
                                  v-for="item in detail.levelList"
                                  :key="item.id"
                                  :label="item.levelName"
                                  :value="item.id" />
                              </el-select>
                            </div>
                            <p class="hint-text">
                              注意：调整伙伴等级后，会同步修改该伙伴的折扣和激励比例，修改为等级默认值
                            </p>
                          </div>
                        </el-form-item>
                        <el-form-item :label="codeLabel">
                          <div class="content-item">
                            <div class="content-item-box">
                              <el-input
                                v-model="formLevel.smsCode"
                                placeholder="请输入" />
                              <GetMsgCode />
                            </div>
                          </div>
                        </el-form-item>
                      </el-form>

                      <div class="btn-box">
                        <el-button
                          type="primary"
                          @click="confirmIdentity">
                          确定
                        </el-button>
                        <el-button @click="cancelIdentity">取消</el-button>
                      </div>
                    </div>
                  </el-popover>
                </div>
              </div>
              <div class="item">
                <p>联系方式</p>
                <p>{{ detail.member.mobile }}</p>
              </div>
            </div>
            <div class="info-box">
              <div class="item">
                <p>实名状态</p>
                <p>{{ detail.member.mobile }}</p>
              </div>
              <div class="item">
                <p>注册日期</p>
                <p>{{ detail.member.mobile }}</p>
              </div>
              <div class="item">
                <p>伙伴归属</p>
                <div>
                  <span>{{ detail.member.attributionName }}</span>
                  <el-popover
                    placement="bottom"
                    :width="330"
                    trigger="click"
                    popper-class="popover-wrapper"
                    ref="popoverOwnership"
                    @hide="
                      accountName = '';
                      formOwnership.accountName = '';
                      formOwnership.smsCode = '';
                    ">
                    <!-- <template #reference>
                      <el-text
                        type="primary"
                        class="text-btn">
                        重新指定
                      </el-text>
                    </template> -->
                    <div class="popover-content">
                      <el-form
                        label-position="top"
                        :model="formOwnership">
                        <el-form-item label="将指定新的归属伙伴">
                          <div class="content-item">
                            <div class="content-item-box">
                              <el-input
                                v-model="accountName"
                                placeholder="输入伙伴账号" />
                              <el-button
                                type="primary"
                                text
                                bg
                                @click="findFn">
                                检索
                              </el-button>
                            </div>
                            <p>新伙伴为：{{ formOwnership.accountName }}</p>
                          </div>
                        </el-form-item>
                        <el-form-item :label="codeLabel">
                          <div class="content-item">
                            <div class="content-item-box">
                              <el-input
                                v-model="formOwnership.smsCode"
                                placeholder="请输入" />
                              <GetMsgCode />
                            </div>
                          </div>
                        </el-form-item>
                      </el-form>

                      <div class="btn-box">
                        <el-button
                          type="primary"
                          @click="confirmOwnership">
                          确定
                        </el-button>
                        <el-button @click="cancelOwnership">取消</el-button>
                      </div>
                    </div>
                  </el-popover>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="detail-box">
          <div class="detail-title-box">
            <span>财务信息</span>
            <div>
              <el-text
                type="primary"
                @click="$router.push({ name: 'logger', query: { memberId: detail.member.id } })">
                资金划拨操作记录
              </el-text>
              <el-text
                type="primary"
                @click="$router.push({ name: 'logger', query: { memberId: detail.member.id } })">
                伙伴充值记录
              </el-text>
            </div>
          </div>

          <div class="detail-info base-info">
            <div class="info-box">
              <div class="item">
                <p>伙伴累计充值</p>
                <p>{{ detail.member.rechargeMoney }}</p>
              </div>
              <div class="item">
                <p>伙伴算力券余额</p>
                <div class="item-content">
                  <span>{{ detail.member.voucherMoney }}</span>
                  <div class="flex-center">
                    <div>
                      <el-popover
                        placement="bottom"
                        :width="330"
                        trigger="click"
                        popper-class="popover-wrapper"
                        ref="popoverTransfer"
                        @hide="
                          formTransfer.rechargeMoney = '';
                          formTransfer.voucherMoney = '';
                          formTransfer.smsCode = '';
                          userStore.getUser();
                        ">
                        <template #reference>
                          <el-text
                            type="primary"
                            class="text-btn">
                            资金划拨 &nbsp;
                          </el-text>
                        </template>
                        <div class="popover-content">
                          <!-- 资金划拨 -->
                          <p class="title">资金划拨</p>
                          <el-form
                            label-position="top"
                            :rules="rules"
                            :model="formTransfer">
                            <el-form-item label="客户本次充值(元)" prop="rechargeMoney">
                              <div class="content-item">
                                <div class="content-item-box">
                                  <el-input
                                    input-style="width:275px;"
                                    v-model="formTransfer.rechargeMoney"
                                    placeholder="请输入" @input="voucherMoneyTemp"/>
                                </div>
                              </div>
                            </el-form-item>
                            <div class="paramsInfo">
                              <div class="item">
                                <div class="title">
                                  客户折扣
                                </div>
                                <div class="value">
                                  {{formTransfer.voucherMoney?parseFloat(formTransfer.rechargeMoney/formTransfer.voucherMoney).toFixed(2): detail.member.discountRatio}}
                                </div>
                              </div>
                              <div class="item">
                                <div class="title">
                                  本次划拨算力券
                                </div>
                                <div class="value">
                                  {{ parseFloat(formTransfer.rechargeMoney /detail.member.discountRatio).toFixed(2) }}
                                </div>
                              </div>
                              <div class="item">
                                <div class="title">
                                  本次收益(元)
                                </div>
                                <div class="value">
                                  {{
                                    formTransfer.voucherMoney && formTransfer.rechargeMoney?
                                   (parseFloat((parseFloat(formTransfer.rechargeMoney/formTransfer.voucherMoney).toFixed(2) - partnerParams1.partnerDiscountRatio).toFixed(2)) * formTransfer.voucherMoney).toFixed(2):
                                   '0.00'
                                  }}
                                </div>
                              </div>
                            </div>

                            <el-form-item label="本次实际划拨" prop="voucherMoney">
                              <div class="content-item">
                                <div class="content-item-box">
                                  <div class="uservoucher">余额：{{ userStore.user.voucher }}</div>
                                  <el-input
                                    input-style="width:275px;"
                                    v-model="formTransfer.voucherMoney"
                                    placeholder="请输入" />
                                </div>
                              </div>
                            </el-form-item>
                            <el-form-item :label="codeLabel" prop="smsCode">
                              <div class="content-item">
                                <div class="content-item-box">
                                  <el-input
                                    v-model="formTransfer.smsCode"
                                    placeholder="请输入" />
                                  <GetMsgCode />
                                </div>
                              </div>
                            </el-form-item>
                            <el-form-item label="备注" prop="remark">
                              <div class="content-item">
                                <div class="content-item-box">
                                  <el-input
                                    v-model="formTransfer.remark"
                                    style="width: 290px;height:50px;"
                                    maxlength="20"
                                    placeholder="请输入"
                                    show-word-limit
                                    type="text"
                                  />
                                </div>
                              </div>
                            </el-form-item>
                          </el-form>

                          <div class="btn-box">
                            <el-button
                              type="primary"
                              @click="confirmTransfer">
                              确认划拨
                            </el-button>
                            <el-button @click="cancelTransfer">取消</el-button>
                          </div>
                        </div>
                      </el-popover>
                    </div>

                    <div>
                      <el-popover
                        placement="bottom"
                        :width="330"
                        trigger="click"
                        popper-class="popover-wrapper"
                        ref="popoverSend"
                        @hide="
                          formSend.voucherMoney = '';
                          formSend.addReason = '';
                          formSend.smsCode = '';
                          userStore.getUser();
                        ">
                        <template #reference>
                          <el-text
                            type="primary"
                            class="text-btn">
                            赠送
                          </el-text>
                        </template>
                        <div class="popover-content">
                          <el-form
                            label-position="top"
                            :model="formSend">
                            <el-form-item label="本次赠送算力券金额为">
                              <div class="content-item">
                                <div class="content-item-box">
                                  <el-input
                                    v-model="formSend.voucherMoney"
                                    placeholder="请输入" />
                                  <span>元</span>
                                </div>
                                <p class="color-gray">余额：{{ userStore.user.voucher }}</p>
                              </div>
                            </el-form-item>
                            <el-form-item label="赠送原因">
                              <div class="content-item">
                                <div class="content-item-box">
                                  <el-input
                                    v-model="formSend.addReason"
                                    placeholder="请输入" />
                                </div>
                              </div>
                            </el-form-item>
                            <el-form-item :label="codeLabel">
                              <div class="content-item">
                                <div class="content-item-box">
                                  <el-input
                                    v-model="formSend.smsCode"
                                    placeholder="请输入" />
                                  <GetMsgCode />
                                </div>
                              </div>
                            </el-form-item>
                          </el-form>

                          <div class="btn-box">
                            <el-button
                              type="primary"
                              @click="confirmSend">
                              确认赠送
                            </el-button>
                            <el-button @click="cancelSend">取消</el-button>
                          </div>
                        </div>
                      </el-popover>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item">
                <p>伙伴折扣</p>
                <div>
                  <span>{{ detail.member.discountRatio }}</span>
                  <el-popover
                    placement="bottom"
                    :width="330"
                    trigger="click"
                    popper-class="popover-wrapper"
                    ref="popoverDiscount"
                    @hide="
                      formDiscount.discountRatio = '';
                      formDiscount.smsCode = '';
                      showDiscountHint = false;
                    ">
                    <template #reference>
                      <el-text
                        type="primary"
                        class="text-btn">
                        折扣调整
                      </el-text>
                    </template>
                    <div class="popover-content">
                      <div class="title">
                        <p v-if="userStore.user.type !== 3">您当前的折扣为：{{ userStore.user.discountRatio }}</p>
                        <p>伙伴当前的折扣为：{{ detail.member.discountRatio }}</p>
                      </div>

                      <el-form
                        label-position="top"
                        :model="formDiscount">
                        <el-form-item label="本次调整为">
                          <div class="content-item">
                            <div class="content-item-box">
                              <el-input
                                v-model="formDiscount.discountRatio"
                                placeholder="请输入"
                                @input="checkPartnerDiscount" />
                            </div>
                            <p
                              class="hint-text color-danger"
                              v-show="showDiscountHint">
                              调整折扣低于伙伴等级对应折扣，可能导致亏损，请仔细核对后调整。
                            </p>
                          </div>
                        </el-form-item>
                        <el-form-item :label="codeLabel">
                          <div class="content-item">
                            <div class="content-item-box">
                              <el-input
                                v-model="formDiscount.smsCode"
                                placeholder="请输入" />
                              <GetMsgCode />
                            </div>
                          </div>
                        </el-form-item>
                      </el-form>

                      <div class="btn-box">
                        <el-button
                          type="primary"
                          @click="confirmDiscount">
                          确定
                        </el-button>
                        <el-button @click="cancelDiscount">取消</el-button>
                      </div>
                    </div>
                  </el-popover>
                </div>
              </div>
            </div>
            <div class="info-box">
              <div class="item">
                <p>伙伴激励比例</p>
                <div>
                  <span>{{ detail.member.incentiveRatio }}</span>
                  <el-popover
                    placement="right"
                    :width="330"
                    trigger="click"
                    popper-class="popover-wrapper"
                    ref="popoverStimulate"
                    @hide="
                      formStimulate.incentiveRatio = '';
                      formStimulate.incentiveType = '';
                      formStimulate.smsCode = '';
                    ">
                    <template #reference>
                      <el-text
                        type="primary"
                        class="text-btn">
                        激励调整
                      </el-text>
                    </template>
                    <div class="popover-content">
                      <div class="title">
                        <p v-if="userStore.user.type !== 3">您当前的激励比例为：{{ userStore.user.incentiveRatio }}</p>
                        <p>伙伴当前的激励比例为：{{ detail.member.incentiveRatio }}</p>
                      </div>

                      <el-form
                        label-position="top"
                        :model="formStimulate">
                        <el-form-item label="本次调整为">
                          <div class="content-item">
                            <div class="content-item-box">
                              <el-input
                                v-model="formStimulate.incentiveRatio"
                                placeholder="请输入" />
                            </div>
                          </div>
                        </el-form-item>
                        <el-form-item label="生效时间">
                          <div class="content-item">
                            <div class="content-item-box">
                              <el-radio-group v-model="formStimulate.incentiveType">
                                <el-radio :label="1">立即生效</el-radio>
                                <el-radio :label="2">次日生效</el-radio>
                              </el-radio-group>
                            </div>
                          </div>
                        </el-form-item>
                        <el-form-item :label="codeLabel">
                          <div class="content-item">
                            <div class="content-item-box">
                              <el-input
                                v-model="formStimulate.smsCode"
                                placeholder="请输入" />
                              <GetMsgCode />
                            </div>
                          </div>
                        </el-form-item>
                      </el-form>

                      <div class="btn-box">
                        <el-button
                          type="primary"
                          @click="confirmStimulate">
                          确定
                        </el-button>
                        <el-button @click="cancelStimulate">取消</el-button>
                      </div>
                    </div>
                  </el-popover>
                </div>
              </div>
              <div class="item">
                <p>累计获得激励</p>
                <p>{{ detail.member.incentiveMoney }}</p>
              </div>
            </div>
          </div>
        </div>

        <div class="detail-box">
          <div class="detail-title-box">
            <span>销售概览</span>
          </div>

          <div class="detail-info data-info">
            <div class="data-top-box">
              <div class="item-box">
                <div class="amout-box">
                  <p>上月消耗总金额</p>
                  <p>{{ detail.lastMonthPriceTotal }}</p>
                </div>

                <div class="process-box">
                  <div class="process-item">
                    <span class="tag-name">预付费金额</span>
                    <div class="tag-content">
                      <el-progress
                        :stroke-width="15"
                        :show-text="false"
                        color="#BD3124"
                        :percentage="handlePercentage(1, 1)" />
                      <span>{{ detail.lastTakePrice }}</span>
                    </div>
                  </div>
                  <div class="process-item">
                    <span class="tag-name">后付费金额</span>
                    <div class="tag-content">
                      <el-progress
                        :stroke-width="15"
                        :show-text="false"
                        color="#7F83F7"
                        :percentage="handlePercentage(1, 2)" />
                      <span>{{ detail.lastBackPrice }}</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="item-box">
                <div class="amout-box">
                  <p>本月消耗总金额</p>
                  <p>{{ detail.monthPriceTotal }}</p>
                </div>

                <div class="process-box">
                  <div class="process-item">
                    <span class="tag-name">预付费金额</span>
                    <div class="tag-content">
                      <el-progress
                        :stroke-width="15"
                        :show-text="false"
                        color="#BD3124"
                        :percentage="handlePercentage(2, 1)" />
                      <span>{{ detail.takePrice }}</span>
                    </div>
                  </div>
                  <div class="process-item">
                    <span class="tag-name">后付费金额</span>
                    <div class="tag-content">
                      <el-progress
                        :stroke-width="15"
                        :show-text="false"
                        color="#7F83F7"
                        :percentage="handlePercentage(2, 2)" />
                      <span>{{ detail.backPrice }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div
              class="data-bottom-box"
              id="chartBox"></div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
  import { ElMessage } from 'element-plus';

  import {
    getMemberDetail,
    changeLevel,
    checkPartner,
    changePartner,
    getAgentInfo,
    addVoucherMoney,
    changeDiscountRatio,
    changeIncentiveRatio
  } from '@/api/index.js';

  import { useRoute } from 'vue-router';
  const route = useRoute();
  import { useUserStore } from '@/stores/user';
  const userStore = useUserStore();

  const { proxy } = getCurrentInstance();

  import PageTitle from '@/components/PageTitle.vue';
  import GetMsgCode from '@/components/GetMsgCode.vue';
  import echarts from '@/utils/echarts.js';


  function voucherMoneyTemp(){
    formTransfer.voucherMoney = parseFloat(formTransfer.rechargeMoney /detail.value.member.discountRatio).toFixed(2);
  }

  let form = reactive({
    voucherMoney: '',
    addReason: '',
    smsCode: '',
    accountName: ''
  });

  const codeLabel = `输入手机号为 ${userStore.user.mobile} 的验证码`;

  // 伙伴身份
  let formLevel = reactive({
    levelId: '',
    smsCode: ''
  });

  const popoverIdentity = ref(null);

  function confirmIdentity() {
    const { levelId, smsCode } = formLevel;

    if (!levelId) {
      ElMessage.error('请选择伙伴等级');
      return;
    }
    if (!smsCode) {
      ElMessage.error('请输入验证码');
      return;
    }

    changeLevel({
      memberId: detail.value.member.id,
      levelId,
      smsCode
    }).then(res => {
      ElMessage.success('等级已调整');
      popoverIdentity.value.hide();
      getMemberInfo();
    });
  }

  function cancelIdentity() {
    popoverIdentity.value.hide();
  }

  // 伙伴归属
  let accountName = ref('');
  let formOwnership = reactive({
    accountName: '',
    smsCode: ''
  });

  function findFn() {
    form.accountName = '';

    checkPartner({
      accountName: accountName.value
    }).then(res => {
      formOwnership.accountName = res.data;
    });
  }

  const popoverOwnership = ref(null);

  function confirmOwnership() {
    const { accountName, smsCode } = formOwnership;

    if (!accountName) {
      ElMessage.error('请输入新伙伴信息');
      return;
    }
    if (!smsCode) {
      ElMessage.error('请输入验证码');
      return;
    }
    const partnerId = ""
    getAgentInfo(accountName).then(res=>{
      if(res.success){
        partnerId = res.data.id
      }
    })


    changePartner({
      partnerId: detail.value.member.id,
      userId,
      smsCode,
      userType:"PARTNER"
    }).then(res => {
      ElMessage.success('已重新指定');
      popoverOwnership.value.hide();
      getMemberInfo();
    });
  }

  function cancelOwnership() {
    popoverOwnership.value.hide();
  }

  // 划拨
  let formTransfer = reactive({
    rechargeMoney: '',
    voucherMoney: '',
    smsCode: ''
  });

  const popoverTransfer = ref(null);

  function confirmTransfer() {
    const { rechargeMoney, voucherMoney, smsCode } = formTransfer;
    if (!rechargeMoney) {
      ElMessage.error('请输入充值金额');
      return;
    }
    if (!voucherMoney) {
      ElMessage.error('请输入划拨金额');
      return;
    }
    if (!smsCode) {
      ElMessage.error('请输入验证码');
      return;
    }

    addVoucherMoney({
      remark:addReason,
      smsCode,
      type: 'TRANSFER',
      userId: detail.value.member.id,
      userType:"PARTNER",
      voucher:voucherMoney,
    }).then(res => {
      if(res.success){
        ElMessage.success('您的交易正在处理中,请耐心等待。');
      }
      popoverTransfer.value.hide();
      getMemberInfo();
    });
  }

  function cancelTransfer() {
    popoverTransfer.value.hide();
  }

  // 赠送
  let formSend = reactive({
    voucherMoney: '',
    addReason: '',
    smsCode: ''
  });

  const popoverSend = ref(null);

  function confirmSend() {
    const { voucherMoney, addReason, smsCode } = formSend;

    if (!voucherMoney) {
      ElMessage.error('请输入赠送金额');
      return;
    }
    if (!smsCode) {
      ElMessage.error('请输入验证码');
      return;
    }

    addVoucherMoney({
      remark:addReason,
      smsCode,
      type: 'GIVE',
      userId: detail.value.member.id,
      userType:"PARTNER",
      voucher:voucherMoney,
    }).then(res => {
      if(res.success){
        ElMessage.success('您的交易正在处理中,请耐心等待。');
      }
      popoverSend.value.hide();
      getMemberInfo();
    });
  }

  function cancelSend() {
    popoverSend.value.hide();
  }

  // 折扣调整
  let formDiscount = reactive({
    discountRatio: '',
    smsCode: ''
  });

  const popoverDiscount = ref(null);

  // 折扣对比
  let showDiscountHint = ref(false);
  const checkPartnerDiscount = proxy.$debounce(() => {
    if (formDiscount.discountRatio) {
      const level = detail.value.levelList.find(item => item.id === detail.value.member.levelId);
      if (formDiscount.discountRatio < level.discountRatio) {
        showDiscountHint.value = true;
      } else {
        showDiscountHint.value = false;
      }
    } else {
      showDiscountHint.value = false;
    }
  }, 500);

  function confirmDiscount() {
    const { discountRatio, smsCode } = formDiscount;

    if (!discountRatio) {
      ElMessage.error('请输入折扣');
      return;
    }
    if (!smsCode) {
      ElMessage.error('请输入验证码');
      return;
    }

    changeDiscountRatio({
      userId: detail.value.member.id,
      discountRatio:parseFloat(discountRatio),
      smsCode,
      userType:"PARTNER"
    }).then(res => {
      ElMessage.success('已调整');
      popoverDiscount.value.hide();
      getMemberInfo();
    });
  }

  function cancelDiscount() {
    popoverDiscount.value.hide();
  }

  // 激励调整
  let formStimulate = reactive({
    incentiveRatio: '',
    incentiveType: '',
    smsCode: ''
  });

  const popoverStimulate = ref(null);

  function confirmStimulate() {
    const { incentiveRatio, incentiveType, smsCode } = formStimulate;
    if (!incentiveRatio) {
      ElMessage.error('请输入激励比例');
      return;
    }
    if (!incentiveType) {
      ElMessage.error('请选择生效时间');
      return;
    }
    if (!smsCode) {
      ElMessage.error('请输入验证码');
      return;
    }

    changeIncentiveRatio({
      memberId: detail.value.member.id,
      incentiveRatio,
      incentiveType,
      smsCode
    }).then(res => {
      ElMessage.success('已调整');
      popoverStimulate.value.hide();
      getMemberInfo();
    });
  }

  function cancelStimulate() {
    popoverStimulate.value.hide();
  }

  // 处理进度
  function handlePercentage(month, type) {
    let res = 0;

    if (month === 1) {
      if (detail.value.lastMonthPriceTotal) {
        if (type === 1) {
          res = (detail.value.lastTakePrice / detail.value.lastMonthPriceTotal) * 100;
        } else {
          res = (detail.value.lastBackPrice / detail.value.lastMonthPriceTotal) * 100;
        }
      }
    } else {
      if (detail.value.monthPriceTotal) {
        if (type === 1) {
          res = (detail.value.takePrice / detail.value.monthPriceTotal) * 100;
        } else {
          res = (detail.value.backPrice / detail.value.monthPriceTotal) * 100;
        }
      }
    }

    return res;
  }

  function initLineChart() {
    let chartDom = document.getElementById('chartBox');
    if (!chartDom) {
      return;
    } else {
      echarts.dispose(chartDom);
    }

    setTimeout(() => {
      console.log(detail.value.monthList);
      let myChart = echarts.init(chartDom);
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '8%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: detail.value.monthList.month || []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '预付费',
            type: 'line',
            stack: 'Total',
            data: detail.value.monthList.oneMoneyList || []
          },
          {
            name: '后付费',
            type: 'line',
            stack: 'Total',
            data: detail.value.monthList.twoMoneyList || []
          }
        ]
      };

      myChart.setOption(option, true);
    }, 300);
  }

  let detail = ref({});
  function getMemberInfo() {
    getMemberDetail(route.query.id).then(res => {
      // res.data.member.rechargeMoney =parseFloat(res.data.member.rechargeMoney.toFixed(2)) 
      // res.data.member.voucherMoney =parseFloat(res.data.member.voucherMoney.toFixed(2)) 
      // res.data.member.incentiveRatio =parseFloat(res.data.member.incentiveRatio.toFixed(2)) 
      // res.data.member.incentiveMoney =parseFloat(res.data.member.incentiveMoney.toFixed(2)) 
      // res.data.lastMonthPriceTotal =parseFloat(res.data.lastMonthPriceTotal.toFixed(2)) 
      // res.data.monthPriceTotal =parseFloat(res.data.monthPriceTotal.toFixed(2)) 
      // res.data.takePrice =parseFloat(res.data.takePrice.toFixed(2)) 
      // res.data.backPrice =parseFloat(res.data.backPrice.toFixed(2))  
      // res.data.lastTakePrice =parseFloat(res.data.lastTakePrice.toFixed(2))  
      // res.data.lastBackPrice =parseFloat(res.data.lastBackPrice.toFixed(2))  

      detail.value = res.data;
      console.log(detail.value);

      nextTick(() => {
        initLineChart();
      });
    });
  }

  onMounted(() => {
    getMemberInfo();
  });
</script>

<style lang="scss" scoped>
  .partner-detail-wrapper {
    .base-info {
      .info-box {
        display: flex;
        align-items: center;

        &:first-of-type {
          margin-bottom: 40px;
        }

        .item {
          min-width: 200px;
          margin-right: 20px;

          p {
            &:nth-of-type(1) {
              margin-bottom: 10px;
              color: #888;
            }

            .el-text {
              margin-left: 10px;
              cursor: pointer;
            }
          }

          .item-content {
            display: flex;
            align-items: center;

            .el-text {
              margin-left: 10px;
              cursor: pointer;
            }
          }
        }
      }
    }

    .data-info {
      .data-top-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item-box {
          width: 46%;

          .amout-box {
            margin-bottom: 10px;

            p {
              &:nth-of-type(1) {
                margin-bottom: 10px;
                color: #888;
              }
            }
          }

          .process-box {
            .process-item {
              display: flex;
              align-items: center;
              margin-bottom: 10px;

              .tag-name {
                flex-shrink: 0;
                margin-right: 10px;
                color: #888;
              }

              .tag-content {
                flex: 1;
                display: flex;
                align-items: center;

                .el-progress {
                  flex: 1;
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }

      .data-bottom-box {
        height: 200px;
      }
    }
  }
</style>
